<template>
  <view class="container">
 
    
    <view v-if="loading" class="loading">
      <view class="loading-spinner"></view>
    </view>
    
    <view v-else class="feedback-detail">
      <view class="card">
        <view class="card-header">
          <view class="title">{{ feedback.title }}</view>
          <view :class="['status-tag', getStatusClass(feedback.status)]">{{ getStatusText(feedback.status) }}</view>
        </view>
        
        <view class="info-row">
          <text class="label">提交时间：</text>
          <text>{{ formatDate(feedback.created_at) }}</text>
        </view>
        
        <view class="content-box">
          <text class="content-title">反馈内容：</text>
          <text class="content">{{ feedback.content }}</text>
        </view>
        
        <view v-if="mediaUrls && mediaUrls.length > 0" class="images-box">
          <text class="images-title">附件图片：</text>
          <view class="images-list">
            <image 
              v-for="(url, index) in mediaUrls" 
              :key="index" 
              :src="url" 
              mode="aspectFill"
              @click="previewImage(index)"
              class="image-item"
            ></image>
          </view>
        </view>
      </view>
      
      <view v-if="feedback.status === 'RESOLVED'" class="card">
        <view class="card-header">
          <view class="title">处理结果</view>
        </view>
        
        <view class="info-row">
          <text class="label">处理人：</text>
          <text>{{ feedback.handler_name || '系统管理员' }}</text>
        </view>
        
        <view class="info-row">
          <text class="label">处理时间：</text>
          <text>{{ formatDate(feedback.updated_at) }}</text>
        </view>
        
        <view class="content-box">
          <text class="content-title">处理结果：</text>
          <text class="content">{{ feedback.handle_result || '问题已解决' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getFeedbackDetail } from '@/api/services.js'

export default {
  data() {
    return {
      feedbackId: null,
      feedback: {},
      mediaUrls: [],
      loading: true
    }
  },
  onLoad(options) {
    this.feedbackId = options.id
    this.loadFeedbackDetail()
  },
  methods: {
    navigateBack() {
      uni.navigateBack()
    },
    
    loadFeedbackDetail() {
      this.loading = true
      
      getFeedbackDetail(this.feedbackId)
        .then(res => {
          console.log('获取反馈详情响应:', res)
          if (res.code === 200) {
            this.feedback = res.data
            
            // 处理媒体URL
            if (this.feedback.media_urls) {
              try {
                // 尝试解析JSON字符串，如果已经是数组则直接使用
                this.mediaUrls = typeof this.feedback.media_urls === 'string' 
                  ? JSON.parse(this.feedback.media_urls) 
                  : this.feedback.media_urls;
                
                // 确保是数组
                if (!Array.isArray(this.mediaUrls)) {
                  this.mediaUrls = [];
                }
              } catch (e) {
                console.error('解析media_urls失败:', e)
                this.mediaUrls = []
              }
            } else {
              this.mediaUrls = []
            }
          } else {
            uni.showToast({
              title: res.message || '获取反馈详情失败',
              icon: 'none'
            })
          }
        })
        .catch(err => {
          console.error('获取反馈详情失败', err)
          uni.showToast({
            title: '获取反馈详情失败',
            icon: 'none'
          })
        })
        .finally(() => {
          this.loading = false
        })
    },
    
    getStatusClass(status) {
      switch (status) {
        case 'PENDING':
          return 'status-pending'
        case 'RESOLVED':
          return 'status-resolved'
        default:
          return ''
      }
    },
    
    getStatusText(status) {
      switch (status) {
        case 'PENDING':
          return '待处理'
        case 'RESOLVED':
          return '已解决'
        default:
          return '未知'
      }
    },
    
    formatDate(dateStr) {
      if (!dateStr) return ''
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    
    previewImage(index) {
      uni.previewImage({
        urls: this.mediaUrls,
        current: index
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 40rpx;
}

.navbar {
  display: flex;
  align-items: center;
  height: 90rpx;
  background-color: #ffffff;
  border-bottom: 1rpx solid #f0f0f0;
  padding: 0 30rpx;
  
  &-left {
    width: 60rpx;
    display: flex;
    align-items: center;
  }
  
  &-title {
    flex: 1;
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
  }
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 36rpx;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-back:before {
  content: "\e679";
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  
  &-spinner {
    width: 60rpx;
    height: 60rpx;
    border: 6rpx solid #f3f3f3;
    border-top: 6rpx solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.feedback-detail {
  padding: 20rpx;
}

.card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  
  .title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.status-tag {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  color: #ffffff;
}

.status-pending {
  background-color: #ff9900;
}

.status-resolved {
  background-color: #19be6b;
}

.info-row {
  font-size: 28rpx;
  margin-bottom: 10rpx;
  color: #666;
  
  .label {
    color: #999;
  }
}

.content-box {
  margin-top: 20rpx;
  
  .content-title {
    font-size: 28rpx;
    color: #999;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .content {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
  }
}

.images-box {
  margin-top: 30rpx;
  
  .images-title {
    font-size: 28rpx;
    color: #999;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .images-list {
    display: flex;
    flex-wrap: wrap;
  }
  
  .image-item {
    width: 200rpx;
    height: 200rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    border-radius: 8rpx;
  }
}
</style> 